import React from 'react';
import './Game.css'

import {Pagination} from 'swiper';

import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';


const Game = () => {
    return (
        <div className='game-container'>
            <Swiper className='gameSwiper'
             modules={[Pagination]}
             pagination={{ clickable: true ,type:"bullets"}}
            
            >
                <SwiperSlide className='gameSwiperSlide'>
                <div className='game-items'>
            <div className="game-item">
                <svg className="icon iconfont" aria-hidden={true}>
                    <use xlinkHref="#icon-jinbi1"></use>
                </svg>
                <div className="game-plant">领淘金币</div>
              
            </div>
            <div className="game-item">
                <svg className="icon iconfont" aria-hidden={true}>
                    <use xlinkHref="#icon-ziyuan"></use>
                </svg>
                <div className="game-plant">芭芭农场</div>
               
            </div>
            <div className="game-item">

                <svg className="icon iconfont" aria-hidden={true}>
                    <use xlinkHref="#icon-peitubiaotouxiang-"></use>
                </svg>
                <div className="game-plant">淘宝人生</div>
               
            </div>
            <div className="game-item">
                <svg className="icon iconfont" aria-hidden={true}>
                    <use xlinkHref="#icon-fangkuai"></use>
                </svg>
                <div className="game-plant">火爆连连消</div>
               
            </div>
        </div>
                </SwiperSlide>
                <SwiperSlide className='gameSwiperSlide'>
                <div className='game-items'>
            <div className="game-item">
                <svg className="icon iconfont" aria-hidden={true}>
                    <use xlinkHref="#icon-kapai"></use>
                </svg>
                <div className="game-plant">斗地主</div>
              
            </div>
            <div className="game-item">
                <svg className="icon iconfont" aria-hidden={true}>
                    <use xlinkHref="#icon-jiating-maoshe"></use>
                </svg>
                <div className="game-plant">小流浪旅社</div>
               
            </div>
            <div className="game-item">

                <svg className="icon iconfont" aria-hidden={true}>
                    <use xlinkHref="#icon-jiangbei"></use>
                </svg>
                <div className="game-plant">成就奖励</div>
               
            </div>
            <div className="game-item">
                <svg className="icon iconfont" aria-hidden={true}>
                    <use xlinkHref="#icon-zhongxin"></use>
                </svg>
                <div className="game-plant">活力中心</div>
               
            </div>
        </div>
                </SwiperSlide>
            </Swiper>
        </div>
    )
}

export default Game